<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>缩放练习</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .clearfix::after{
                clear: both;
                content: "";
                display: block;
            }
            dt{
                overflow: hidden;
            }
            dl{
                width: 382px;
                height: 461px;
                float: left;
                position: relative;
            }
            dd{
                width: 382px;
                height: 231px;
            }
            img{
                vertical-align: top;
                transition: all 0.5s;
            }
            h3,h4,p{
                font-size: 20px;
                line-height: 28px;
                font-family: "微软雅黑";
                font-weight: normal;
                color: #fff;
                padding: 40px 18px 0;
                text-align: left;
            }
            h4{
                font-size: 12px;
                line-height: 22px;
                margin: 10px 0;
                padding: 0 18px;
            }
            p{
                font-size: 13px;
                line-height: 22px;
                padding: 10px 18px 10px;
            }
            dl:hover dt img{
                transform: scale(1.2,1.2);
            }
            span{
                position: absolute;
                display: block;
                width: 32px;
                height: 16px;
                left: 50%;
            }
        </style>
    </head>
    <body>
        <div class="clearfix">
            <dl style="background: #13b5b1;">
                <dt><img src="https://www.chaofanshuma.com/Public/Theme/Front/default/images/exp_tu1.jpg" alt=""></dt>
                <dd>
                    <h3>有效的定制设计</h3>
                    <h4> CUSTOM DESIGN</h4>
                    <p> 设计是有目的的创作行为，这是从事商业设计服务亘古不变的真理。让每一个元素和色彩都有它存在的意义，而无法复制而成为专属定制。</p>
                </dd>
                <span style="top: 46.5%;background: url('https://www.chaofanshuma.com/Public/Theme/Front/default/images/exp_zx_xbt1.png')"></span>
            </dl>
            <dl style="background:#448aca;">
                <dd>
                    <h3> 有效的目标达成</h3>
                    <h4> GOAL ACHIEVEMENT</h4>
                    <p> 执行团队对项目的目标必须是一致的，想法分散而目标集中，是否具备完善的流程机制与标准,决定项目的预期目标最终能否达成。</p>
                </dd>
                <dt>
                    <img src="https://www.chaofanshuma.com/Public/Theme/Front/default/images/exp_tu2.jpg" alt="">
                </dt>
                <span style="top:50%;background: url('https://www.chaofanshuma.com/Public/Theme/Front/default/images/exp_zx_xbt2.png')"></span>
            </dl>
            <dl style="background:#ea68a2;">
                <dt>
                    <img src="https://www.chaofanshuma.com/Public/Theme/Front/default/images/exp_tu3.jpg" alt="">
                </dt>
                <dd>
                    <h3> 有效的配合与引导</h3>
                    <h4> COORDINATE&amp;GUIDE</h4>
                    <p> 术业有专攻,半数客户不明确项目如何开展配合，"引导式"服务让工作细化到无比简单,并节省大量宝贵时间，合作过的客户对此感受颇深。</p>
                </dd>
                <span style="top: 46.5%;background: url('https://www.chaofanshuma.com/Public/Theme/Front/default/images/exp_zx_xbt3.png')"></span>
            </dl>
        </div>
    </body>
</html>